<template>
  <el-menu class="el-menu-vertical-demo" :background-color="drawerMainColor" text-color="#fff" active-text-color="#409eff" unique-opened
  :collapse="isCollapseComputed" :collapse-transition="false" :default-active="this.$route.meta.truePath">
    <!-- 一级菜单 -->
    <el-submenu :index="item.id + ''" v-for="item in menulist" :key="item.id">
      <template slot="title">
        <i :class="item.icon ? item.icon : iconsObj[item.id]"></i>
        <span>{{item.auth_name}}</span>
      </template>
      <!-- 二级菜单 -->
      <el-menu-item
        :index="subItem.path"
        v-for="subItem in item.children"
        :key="subItem.id"
        @click="saveNavStete(subItem)"
      >
        <template slot="title">
          <i :class="subItem.icon ? subItem.icon : 'el-icon-menu'"></i>
          <span>{{subItem.auth_name}}</span>
        </template>
      </el-menu-item>
    </el-submenu>
  </el-menu>
</template>

<script>
export default {
  computed: {
    drawerMainColor() {
      return this.$store.state.drawer.drawerMainColor
    },
    isCollapseComputed() {
      return this.$store.state.aside.isCollapseState
    },
    clickMenuStateComputed() {
      return this.$store.state.aside.clickMenuState
    },
    menulist() {
      return this.$store.state.aside.menuListState
    }
  },
  data() {
    return {
      iconsObj: {
        1: 'iconfont el-icon-eleme',
        3: 'iconfont el-icon-goods',
        47: 'iconfont el-icon-help',
        48: 'iconfont el-icon-video-camera',
        145: 'iconfont el-icon-s-flag'
      }
    }
  },
  methods: {
    saveNavStete(param) {
      const path = param.path.split('/').slice(-1)
      const adminClickMenu = this.clickMenuStateComputed

      if (path[0] === adminClickMenu) {
        // 调用reload方法，刷新整个页面sssssss
        window.location.reload()
      } else {
        this.$router.push({ name: path })
      }

      this.$store.commit('addTabMutations', param) // 增加当前栏目页面tab页签
    }
  },
  inject: ['reload']
}
</script>

<style lang="less" scoped>
.iconfont {
  margin-right: 10px;
}
</style>
